<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
	<title>Dojo Tooltip Widget Test</title>
	
	<script type="text/javascript">
		/* since we are loading big images (actually, background-images), need to workaround the mozilla bug */
		var djConfig = {isDebug: true, delayMozLoadingFix: true };
	</script>
	
	<script type="text/javascript" src="../../dojo.js"></script>
	<script type="text/javascript">
		dojo.require("dojo.widget.Tooltip");
	</script>
	
	<style>
		.tt { border-bottom: 1px dotted black; cursor: pointer; }
		
		/* override tooltip style for this page */
		body .dojoTooltip { color: blue; border: solid 2px blue; padding: 4px; }
		
		/* and then have some tooltips that look different than the others (just for testing) */
		body .waves { color: red; font-style: italic; background: url(images/2.jpg) top right; border: red 3px dotted;}
		body .bridge { color: yellow; background: url(images/1.jpg) bottom right; font-family: cursive; font-size: 14pt; }
	</style>
</head>

<body>
	<h1>Tooltip test</h1>
	<p>Mouse-over the items below to test tooltips:</p>
	<p>
		<span id="one" class="tt">text</span>
		<span dojoType="tooltip" connectId="one">
			<b>
				<span style="color: blue;">rich formatting</span>
				<span style="color: red; font-size: x-large;"><i>!</i></span>
			</b>
		</span>
		
		<a id="three" href="#bogus">anchor</a>
		<span dojoType="tooltip" connectId="three" caption="inline caption w/fade in" toggle="fade"></span>
	</p>
	
	<button id="four">button</button>
	<span dojoType="tooltip" connectId="four" caption="tooltip on button" toggle="fade"></span>
	
	<img id="five" src="images/question.gif"></img>
	<span dojoType="tooltip" connectId="five" toggle="explode" toggleDuration="250" class="waves">
		exploding tooltip
	</span>
	<img id="six" src="images/question.gif"></img>
	<span dojoType="tooltip" connectId="six" toggle="explode" toggleDuration="500" class="waves">
		slowly exploding tooltip
	</span>

    <select id="seven">
      <option value="alpha">Alpha</option>
      <option value="beta">Beta</option>
      <option value="gamma">Gamma</option>
      <option value="delta">Delta</option>
    </select>
	<span dojoType="tooltip" connectId="seven" href="doc0.html" toggle="fade" 
		executeScripts="true" style="width: 300px;" class="bridge"></span>

<p></p>

	<form>
		<input type="input" id="id1" value="0"/><br>
		<input type="input" id="id2" value="1"/><br>
		<input type="input" id="id3" value="2"/><br>

		<input type="input" id="id4" value="3"/><br>
    	<input type="input" id="id5" value="4"/><br>
		<input type="input" id="id6" value="5"/><br>
	</form>
	<br>

<div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;">
	<span id="s1">text</span><br><br><br>
	<span id="s2">text</span><br><br><br>
	<span id="s3">text</span><br><br><br>
	<span id="s4">text</span><br><br><br>
	<span id="s5">text</span><br><br><br>
</div>

	<span dojoType="tooltip" connectId="id1" delay="100" toggle="explode">some text 1</span>
	<span dojoType="tooltip" connectId="id2" delay="100" toggle="explode">some text 2</span>
	<span dojoType="tooltip" connectId="id3" delay="100" toggle="explode">some text 3</span>
	<span dojoType="tooltip" connectId="id4" delay="100" toggle="explode">some text 4</span>
	<span dojoType="tooltip" connectId="id5" delay="100" toggle="explode">some text 5</span>
	<span dojoType="tooltip" connectId="id6" toggle="explode">some text </span>

	<span dojoType="tooltip" connectId="s1" delay="100" toggle="explode">some text 6</span>
	<span dojoType="tooltip" connectId="s2" delay="100" toggle="explode">some text 7</span>
	<span dojoType="tooltip" connectId="s3" delay="100" toggle="explode">some text 8</span>
	<span dojoType="tooltip" connectId="s4" delay="100" toggle="explode">some text 9</span>
	<span dojoType="tooltip" connectId="s5" delay="100" toggle="explode">some text 10</span>

	<div style="position: absolute; bottom: 0">
		Test tooltips on stuff on bottom of screen.  Should appear above the element.
		<span id="b1" class="tt">text</span>
		<span dojoType="tooltip" connectId="b1">
			<b>
				<span style="color: blue;">rich formatting</span>
				<span style="color: red; font-size: x-large;"><i>!</i></span>
			</b>
		</span>
	    <select id="b2">
	      <option value="alpha">Alpha</option>
	      <option value="beta">Beta</option>
	      <option value="gamma">Gamma</option>
	      <option value="delta">Delta</option>
	    </select>
		<span dojoType="tooltip" connectId="b2" href="doc0.html" executeScripts="true" style="width: 300px;"></span>
	</div>
		
</body>
</html>

